// 申请组件
<template>
  <div class="daily">
    <div class="dailyLefts" :class="[{ move: updateFlag }]">
      <p class="title">{{ updateFlag == true ? "编辑" : "填写" }}申请</p>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="申请类型" prop="applyType">
          <el-select
            v-model="ruleForm.applyType"
            placeholder="请选择项目名称"
            style="width: 100%"
          >
            <el-option
              :label="item.codeMean"
              :value="item.codeNum"
              v-for="(item, index) in maList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请原因" prop="applyReason">
          <el-input
            type="text"
            :rows="4"
            v-model="ruleForm.applyReason"
          ></el-input>
        </el-form-item>
        <el-form-item label="申请备注" prop="applyRemark">
          <el-input
            type="textarea"
            :rows="4"
            v-model="ruleForm.applyRemark"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="审批人" prop="applyRemark">
          <el-select
            v-model="nickName"
            placeholder="请选择用户"
            clearable
            @change="monthChange()"
          >
            <el-option
              v-for="item in options"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
            >
            </el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item>
          <el-button type="primary" @click="onSubmit">提 交</el-button>
          <el-button
            type="primary"
            @click="updateFlag = false"
            v-if="updateFlag == true"
            >填写日报</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="dailyRights">
      <el-tabs v-model="activeName">
        <el-tab-pane
          :label="index == 0 ? '待审核' : index == 1 ? '通过' : '驳回'"
          :name="index + ''"
          v-for="(item, index) in dailyList"
          :key="index"
        >
          <el-table :data="item" style="width: 100%" height="300px">
            <el-table-column prop="nick_name" label="昵称"> </el-table-column>
            <el-table-column
              prop="apply_status"
              label="请假类型"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.apply_status == 0
                    ? "事假申请"
                    : scope.row.apply_status == 1
                    ? "病假申请"
                    : scope.row.apply_status == 2
                    ? "出差申请"
                    : "报销申请"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="apply_reason"
              label="请假原因"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="apply_remark"
              label="请假备注"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="apply_date" label="时间"> </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="updateDailyList(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="deleteDailyList(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      maList: [],
      dailyId: "",
      projectList: [],
      updateFlag: false,
      activeName: "0",
      dailyList: [[], [], []],
      ruleForm: {
        applyType: "",
        applyRemark: "",
        applyReason: "",
      },
      rules: {
        applyReason: [
          { required: true, message: "请输入原因", trigger: "blur" },
        ],
        applyType: [
          { required: true, message: "请选择申请类型", trigger: "blur" },
        ],
        applyRemark: [
          { required: true, message: "请输入申请备注", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.getDailyList();
    this.getMaList();
    this.getProjectList();
  },
  methods: {
    getMaList() {
      this.$http({
        url: this.$http.adornUrl("/business/ecodetable/query"),
        method: "get",
        params: this.$http.adornParams({
          codeValue: "apply_type",
        }),
      }).then(({ data }) => {
        this.maList = data.page;
      });
    },
    updateDailyList(val) {
      this.updateFlag = true;
      this.ruleForm.applyType = val.apply_type;
      this.ruleForm.applyRemark = val.apply_remark;
      this.ruleForm.applyReason = val.apply_reason;
      this.dailyId = val.id;
    },
    deleteDailyList(id) {
      this.$http({
        url: this.$http.adornUrl("/business/edailypaper/delete"),
        method: "get",
        params: this.$http.adornParams({
          id: id,
        }),
      }).then(({ data }) => {
        this.$message({
          message: "删除成功",
          type: "success",
          duration: 1000,
        });
        this.getDailyList();
      });
    },
    getDailyList() {
      this.dailyList = [[], [], []];
      this.$http({
        url: this.$http.adornUrl("/business/eapply/query"),
        method: "get",
        params: this.$http.adornParams({
          userId: "",
          applyStatus: "",
          pageSize: 999,
        }),
      }).then(({ data }) => {
        data.page.records.forEach((el) => {
          if (el.apply_status == 0) {
            this.dailyList[0].push(el);
          } else if (el.apply_status == 1) {
            this.dailyList[1].push(el);
          } else {
            this.dailyList[2].push(el);
          }
        });
        console.log(this.dailyList);
      });
    },
    getProjectList() {
      this.$http({
        url: this.$http.adornUrl("/business/eproject/query"),
        method: "get",
        params: this.$http.adornParams({
          userId: "",
          pageSize: 999,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.projectList = data.page.records;
        }
      });
    },
    onSubmit() {
      var nowDate = new Date();
      var year = nowDate.getFullYear();
      var month =
        nowDate.getMonth() + 1 < 10
          ? "0" + (nowDate.getMonth() + 1)
          : nowDate.getMonth() + 1;
      var day =
        nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
      var dateStr = year + month + day;
      console.log(dateStr);
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/business/eapply/${!this.updateFlag ? "save" : "update"}`
            ),
            method: "post",
            data: this.$http.adornData({
              id: this.updateFlag == true ? this.dailyId : "",
              userId: localStorage.getItem("userId"),
              applyDate: dateStr,
              applyReason: this.ruleForm.applyReason,
              applyType: this.ruleForm.applyType,
              applyRemark: this.ruleForm.applyRemark,
            }),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "提交成功",
                type: "success",
                duration: 1000,
              });
              this.getDailyList();
              this.$refs["ruleForm"].resetFields();
              this.updateFlag = false;
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.daily {
  width: 1000px;
  overflow: hidden;
  height: 400px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 #d3dce6;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 30px;
  border-radius: 5px;
  .move {
    animation: moveDaily 1s;
  }
  .move1 {
    animation: moveDaily 1s;
  }
  @keyframes moveDaily {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .dailyLefts {
    width: 290px;
    height: 100%;
    .title {
      margin-left: 20px;
      font-size: 20px;
      font-weight: 600;
    }
  }
  .dailyRights {
    width: 690px;
    height: 100%;
  }
}
</style>
